<template>
    <div id="son">
        <div class="left">
            <div class="left-div1">
                <div class="left-div1-1">
                   <p>Create Job Alert</p>
                    <p>Create a job alert now and never miss a job</p>
                    <input type="text" placeholder="  Enter job keyword">
                    <button>Create Job Alerts</button> 
                </div>
                <!-- ul1 -->
                <!-- <div class="left-div1-2">
                    <p>Type of Employment</p>
                    <div class="left-div-2-div"
                    v-for="(value,index) in text" :key="index">
                        <input type="checkbox">
                        <label for="job1">
                            Full Time Jobs
                        </label>
                        <span>{{ text[index] }}</span>
                    </div>
                </div> -->
                <slot></slot>
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
*{
    margin:0;
    padding: 0;
}
#son {
    background:rgb(250,250,251);
}
.left {
    width: 25%;
}
.left-div1 {
    margin-left: 15%;
}
.left-div1-1 {
    background: rgb(232,242,255);
    padding-left:5%;
    border-radius: 16px;
}
.left-div1 p {
    font-size:14px;
    padding-top: 15px;
}
.left-div1 input {
    width:75%;
    height: 30px;
    margin-top:20px;
    border-radius: 6px;
}
.left-div1 button {
    margin-top: 15px;
    margin-bottom:15px ;
    color: white;
    background: rgb(1,98,255);
    height: 30px;
    width: 40%;
    border-radius: 6px;
}


/* slot */
.left-div1-2>p {
    color: black;
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
}
.left-div-2-div input {
    width: 15px;
    height: 15px;
}
.left-div-2-div span {
    margin-left: 20%;
}
</style>